import React from "react";
import styled from "styled-components";

const PopupBox = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 99;
  .father {
    position: absolute;
    top: 1.5rem;
    right: 7rem;
    > span {
      position: absolute;
      right: -2px;
      top: -2px;
      display: block;
      border: 0.8rem solid transparent;
      border-bottom: 0.8rem solid white;
    }
    .content {
      width: 6.5rem;
      position: absolute;
      top: 1rem;
      right: -0.75rem;
      border-radius: 0px 10px;
      background-color: white;
      .item {
        font-size:13px;
        >div{
          padding: 0.5rem 0rem;
          > svg {
            width: 2rem;
            height: 1rem;
          }
        }
       
      }
    }
  }
`;

const Popup = (props) => {
  const { display, handleOnclick ,popupData} = props;

  return (
    <PopupBox
      onClick={() => {
        handleOnclick();
      }}
      style={display ? {} : { display: "none" }}
    >
      <div className="father">
        <span></span>
        <div className="content">
          <div className="item">
            {popupData.map((item, index) => {
              return (
                <div key={index}>
                  <svg className="icon" aria-hidden="true" >
                    <use xlinkHref={item.popup_icon}></use>
                  </svg>
                  {item.popup_name}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </PopupBox>
  );
};
export default Popup;
